import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { motion } from 'framer-motion';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { useSEOConfig, generateHreflangTags, generateStructuredData } from '@/lib/seo';

export default function DigitalPayment() {
  const { t } = useTranslation();
  const seoConfig = useSEOConfig({
    title: `${t('header.digitalPayment')} - 豆豆Pay`,
    description: t('seo.pages.digitalPayment.description')
  });
  const hreflangTags = generateHreflangTags('/digital-payment');
  const structuredData = generateStructuredData(seoConfig, 'website');

  // 服务数据
  const paymentServices = [
    {
      id: 1,
      title: t('header.paymentCollection'),
      description: t('services.paymentCollectionDesc'),
      icon: 'fa-credit-card',
      bgColor: 'bg-blue-50',
      textColor: 'text-blue-600',
      imageUrl: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=payment%20collection%20service%2C%20digital%20payment%20terminal%2C%20POS%20machine&sign=f5ea4d0b97c795e13254f19da1ba3b15'
    },
    {
      id: 2,
      title: t('header.crossBorderPayment'),
      description: t('services.crossBorderDesc'),
      icon: 'fa-globe',
      bgColor: 'bg-purple-50',
      textColor: 'text-purple-600',
      imageUrl: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=cross-border%20payment%20service%2C%20international%20money%20transfer%2C%20currency%20exchange&sign=6393069087792930249d56273ea0345f'
    },
    {
      id: 3,
      title: t('header.foreignCardService'),
      description: t('services.foreignCardServiceDesc'),
      icon: 'fa-credit-card-alt',
      bgColor: 'bg-green-50',
      textColor: 'text-green-600',
      imageUrl: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=foreign%20card%20payment%20service%2C%20international%20credit%20card%2C%20payment%20processing&sign=0c90d2ae24f9b09dac1904bd0283ee51'
    }
  ];

  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Helmet>
        {/* Basic Meta Tags */}
        <title>{seoConfig.title}</title>
        <meta name="description" content={seoConfig.description} />
        <meta name="keywords" content={seoConfig.keywords} />

        {/* Canonical URL */}
        <link rel="canonical" href={seoConfig.url} />

        {/* Open Graph / Facebook */}
        <meta property="og:title" content={seoConfig.title} />
        <meta property="og:description" content={seoConfig.description} />
        <meta property="og:image" content={seoConfig.image} />
        <meta property="og:url" content={seoConfig.url} />
        <meta property="og:locale" content={seoConfig.locale} />
        <meta property="og:site_name" content={seoConfig.siteName} />
        <meta property="og:type" content="website" />

        {/* Twitter */}
        <meta name="twitter:title" content={seoConfig.title} />
        <meta name="twitter:description" content={seoConfig.description} />
        <meta name="twitter:image" content={seoConfig.image} />
        <meta name="twitter:card" content="summary_large_image" />

        {/* Hreflang tags for multilingual SEO */}
        {hreflangTags.map((tag, index) => (
          <link key={index} rel={tag.rel} hrefLang={tag.hreflang} href={tag.href} />
        ))}

        {/* Structured Data */}
        <script type="application/ld+json">
          {JSON.stringify(structuredData)}
        </script>
      </Helmet>
      
      <Header />
      
      <main className="flex-grow">
        {/* 页面标题区域 */}
        <section className="py-16 md:py-24 bg-gradient-to-r from-blue-50 to-indigo-50">
          <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl mx-auto text-center"
            >
              <h1 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
                {t('header.digitalPayment')}
              </h1>
              <div className="w-20 h-1 bg-blue-500 mx-auto mb-8 rounded-full"></div>
              <p className="text-lg md:text-xl text-gray-700 leading-relaxed">
                {t('services.digitalPaymentDesc')}
              </p> 
            </motion.div>
          </div>
        </section>
        
        {/* 服务内容区域 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
              {paymentServices.map((service) => (
                <motion.div
                  key={service.id}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: (service.id - 1) * 0.2 }}
                  viewport={{ once: true }}
                  className="group rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl"
                >
                  <div className={`h-48 ${service.bgColor} flex items-center justify-center`}>
                    <i className={`fa-solid ${service.icon} text-6xl ${service.textColor}`}></i>
                  </div>
                  <div className="p-6">
                    <h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">
                      {service.title}
                    </h3>
                    <p className="text-gray-600 mb-6">
                      {service.description}
                    </p>
                    <div className="flex justify-between items-center">
                      <a 
                        href="#" 
                        className="inline-flex items-center text-blue-600 font-medium hover:text-blue-800 transition-colors"
                      >
                        {t('about.learnMore')}
                        <i className="fa-solid fa-arrow-right ml-2 text-sm"></i>
                      </a>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
            
            {/* 服务详情区域 */}
            <div className="mt-24">
              {paymentServices.map((service) => (
                <motion.div
                  key={`detail-${service.id}`}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.8 }}
                  viewport={{ once: true }}
                  className={`mb-24 grid grid-cols-1 md:grid-cols-2 gap-10 items-center ${service.id % 2 === 0 ? 'md:flex-row-reverse' : ''}`}
                  id={service.id === 2 ? 'cross-border' : service.id === 3 ? 'foreign-card' : ''}
                >
                  <div className="rounded-xl overflow-hidden shadow-xl">
                    <img 
                      src={service.imageUrl} 
                      alt={service.title} 
                      className="w-full h-auto object-cover"
                    />
                  </div>
                  <div>
                    <h3 className="text-2xl font-bold text-gray-900 mb-4">
                      {service.title}
                    </h3>
                    <div className={`w-12 h-1 ${service.textColor} mb-6 rounded-full`}></div>
                    <p className="text-gray-600 mb-4 leading-relaxed">
                      {t(`services.${service.id === 1 ? 'paymentCollectionDetail' : service.id === 2 ? 'crossBorderDetail' : 'foreignCardDetail'}`)}
                    </p>
                    <ul className="space-y-3 mb-8">
                      {[1, 2, 3].map((item) => (
                        <li key={item} className="flex items-start">
                          <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                          <span className="text-gray-600">
                            {t(`services.${service.id === 1 ? 'paymentCollectionFeature' : service.id === 2 ? 'crossBorderFeature' : 'foreignCardFeature'}${item}`)}
                          </span>
                        </li>
                      ))}
                    </ul>
                    <a 
                      href="#" 
                      className="inline-block px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors shadow-md hover:shadow-lg"
                    >
                      {t('about.learnMore')}
                    </a>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      </main>
      
      <Footer />
    </div>
  );
}